<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form>
        <span>省份：</span>
        <select>
            <option class="province"></option>
        </select>
        <span>城市：</span>
        <select>
            <option class="city"></option>
        </select>
        <span>地区：</span>
        <select>
            <option class="area"></option>
        </select>
    </form>
    <script src="../js/axios.min.js"></script>
    <script>
        // 目标:掌握async和await语法，解决回调函数地狱
        // 概念:在async函数内，使用await关键字，获取Promise对象"成功状态"结果值
        // 注意: await必须用在async修饰的函数内 (await会阻止“异步函数内"代码继续执行，原地等待结果)

        // 1。定义async修饰函数
        async function getDate() {

            // 1.try包裹可能产生错误的代码
            try {
                const pObj = await axios({
                    url: 'http://hmajax.itheima.net/api/province'
                })
                pname = pObj.data.list[0]

                const cObj = await axios({
                    url: 'http://hmajax.itheima.net/api/city',
                    params: {
                        pname
                    }
                })
                const cname = cObj.data.list[0]

                const aObj = await axios({
                    url: 'http://hmajax.itheima.net/api/area',
                    params: {
                        pname,
                        cname
                    }
                })
                const areaName = aObj.data.list[0]

                document.querySelector('.province').innerHTML = pname
                document.querySelector('.city').innerHTML = cname
                document.querySelector('.area').innerHTML = areaName
            } catch (error) {
                // 2。接着调用catch块，接收错误信息
                // 如果try里某行代码报错后，try中剩余的代码不会执行了
                console.dir(error)
            }

        }

        getDate()
    </script>
</body>

</html>